<template>
	<view>
		<!-- 已连续签到情况和规则 -->
		<view class="situationSign">
			<!-- 连续 -->
			<view class="continuity">
				已连续签到：
				<!-- <text class="days">{{continuitySign}}</text> -->
				<u-count-to :startVal="0" :endVal="continuitySign"></u-count-to>
			</view>
			<!-- 规则 -->
			<view class="rule" @click="ruleClick">签到规则</view>
		</view>
		<!-- 日历 -->
		<view class="calendarBox">
			<uni-calendar ref="calendar" :selected="getSelectedArray" />
		</view>
		<!-- 立即签到 -->
		<view class="signInButText">
			<u-button customStyle="font-size:18px;"
			:loading="IfImplementEvent" :color="setSingText=='签到领积分'?'#0AB99C':'#cdcdcd'"
			  size="large" :text="setSingText" @click="signInCalendar">
			</u-button>
		</view>
		<u-popup :show="popupShow" mode="center" bgColor="transparent">
           <!-- 签到规则 -->
			<view class="rulePopup" v-if="typePopup=='rulePopup'">
				<view class="title">签到规则</view>
				<view class="font" v-for="(item,index) in ruleFont" :key="index">
					{{index+1}}:{{item.msg}}
				</view>
			</view>
			<!-- 签到成功后提示 -->
			<view class="signSuccess" v-else>
				<view class="imageBox"><image class="img" :src="image"></image></view>
				<view class="titleMsg">您今日签到获得 <text class="signIntegral">{{signIntegral}}</text> 积分</view>
			</view>
			<!-- 关闭 -->
			<view class="closeBox">
				<view class="line"></view>
				<view class="closeBut" @click="popupShow=false">
					<u-icon name="close-circle" size="35" color="#fff"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getNowDate} from "@/utils/common.js"
	import {mapState,mapMutations} from 'vuex'
	import {calendarSignPost,getUserProfileGet} from "@/config/api.js"
	import implementStateButton from "@/mixins/implementStateButton.js"
	export default{
		mixins:[implementStateButton],
		data(){
			return{
				typePopup:'rulePopup',
				signIntegral:0,//每日签到获得的积分
				continuitySign:0,//连续签到多少天
				image:'../../static/calendarSign.png',
				ruleFont:[
					{msg:'注册即送50积分'},
					{msg:'签到获取：连续签到送积分，7天一循环。第1天签到送5分，以后每天连续签到可以获得5、10、15、20、25、30。7天最多获得110分。'},
				],
				NowDate:'',//当前日期
				calendarLoading:false,
				popupShow:false,
			}
		},
		computed:{
			...mapState('m_user',['userInfo','calendarSignMonth']),
			getSelectedArray(){
				let newArray=this.calendarSignMonth.map(function(item){
					return {date:item,info: '已签到'}
				})
				return newArray
			},
			setSingText(){
				if(this.calendarSignMonth.length==0){
					return '签到领积分'
				}
				if(this.calendarSignMonth[0]==this.NowDate){
				   return '今日已签到'
				}else{
					return '签到领积分'
				}
			}
		},
		methods:{
			// 把m_user模块中的updateUserInfo,updateToken函数映射到当前组件中使用
			...mapMutations('m_user',['updateCalendarSignMonth']),
			ruleClick(){//签到规则弹窗打开
			    this.typePopup='rulePopup',
				this.popupShow=true
			},
			IfEmptyCalendar(){
				if(this.calendarSignMonth.length=='0'||!this.calendarSignMonth){
					return
				}
				//拿出缓存的第一个数据，判断当前时间的年月是否相同 不相同则清空 calendarSignMonth
				let dateArray=this.calendarSignMonth[0].split('-')
				let year=new Date().getFullYear()
				let month=new Date().getMonth() + 1
				if(year!=dateArray[0]&&month!=dateArray[1]){
					this.updateCalendarSignMonth([])
				}
			},
			async signInCalendar(){//立即签到
				if(this.calendarSignMonth.length>0&&(this.calendarSignMonth[0]==this.NowDate)){
				   return uni.$u.toast('今日已签到')
				}
				let param={
					userName:this.userInfo.userName,
					userId:this.userInfo.userId,
					phone:this.userInfo.phone
				}
				this.IfImplementMethods()//修改button loading
				const res = await calendarSignPost(param)
				if(res.code=='0'){
					this.calendarLoading=false
					this.updateCacheData('save')
					this.signIntegral=res.data.point//每日签到获得的积分
					this.popupShow=true
					this.typePopup='signSuccess'
				}
				this.IfImplementEvent=false
			},
			async updateCacheData(type='initialization'){
				const res =await getUserProfileGet()
				if(res.code==0){
					this.continuitySign=res.data.days
					if(type=='save'){
						//更新用户签到日期
						this.calendarSignMonth.unshift(this.NowDate)
						this.updateCalendarSignMonth(this.calendarSignMonth)
					}
				}
			}
		},
		created() {
			this.NowDate=getNowDate('年月日')
			this.IfEmptyCalendar()
			this.updateCacheData()
		}
	}
</script>

<style lang="scss" scoped>
// 联系签到情况
.situationSign{
	background:#fff;
	padding:10px 15px;
	display:flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgb(238, 238, 238);
	box-shadow: rgba(166,166,166 ,0.2) 0px 1px 8px 1px;
	// 连续签到
	.continuity{
		.days{
			font-size:18px;
			font-weight: 800;
		}
	}
	// 规则
	.rule{
		padding:4px 8px;
		background:#cdcdcd;
		font-size: 14px;
		border-radius: 2px;
	}
}
// 日历
.calendarBox{
	padding:0 10px;
	margin-top:30px;
}
// 签到
.signInButText{
	width:550rpx;
	margin:40px auto;
}
//弹窗
// 签到规则
.rulePopup,.signSuccess{
	background:#fff;
	padding:10px;
	width:550rpx;
	border-radius: 8px;
	// 标题
	.title{
		font-size: 18px;
		font-weight: 600;
		text-align: center;
	}
	.font{
		font-size:14px;
		padding:5px 0;
	}
}
// 签到成功
.signSuccess{
	// border-radius: 0 0 5px 5px !important;
	padding:0px !important;
	overflow: hidden;
	.imageBox{
		height:170px;
		width:100%;
		.img{
			height:100%;
			width:100%;
		}
	}
	.titleMsg{
		margin:15px;
		text-align: center;
		.signIntegral{
			color: #FF7C3B;
		}
	}
}
// 关闭弹窗按钮
.closeBox{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.line{
		height:20px;
		width:2px;
		background:#fff;
	}
	.closeBut{
		margin-top:2px;
	}
}
</style>